<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destory-on-close="true"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="65%"
    @close="close"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="实名信息" name="first">
        <el-form ref="form" label-width="200px" :model="form">
          <el-form-item label="数字id" prop="digitalId">
            <span>{{ form.digitalId }}</span>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <span>{{ form.name }}</span>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <span>{{ form.phone }}</span>
          </el-form-item>

          <el-form-item label="身份证正面">
            <img v-if="shfenone" class="avatar" disabled :src="shfenone" />
          </el-form-item>
          <el-form-item label="身份证反面">
            <img v-if="shfentwo" class="avatar" disabled :src="shfentwo" />
          </el-form-item>
          <el-form-item v-if="form.realName == 2" label="审核状态">
            <span>审核通过</span>
          </el-form-item>
          <el-form-item v-if="form.realName == 1" label="审核状态">
            <span>审核中</span>
          </el-form-item>
        </el-form>
        <el-form
          v-if="form.realName == 0 || form.realName == 3"
          ref="formthree"
          label-width="200px"
          :model="formthree"
          :rules="rulesTWO"
          style="text-align: center"
        >
          <el-form-item
            label="审核状态"
            prop="checkValue"
            style="display: inline-block"
          >
            <el-select
              v-model="formthree.checkValue"
              placeholder="请选择审核状态"
            >
              <el-option
                v-for="item in options6"
                :key="item.id"
                clearable
                :label="item.creClasName"
                :value="item.id"
                @click.native="optosallTWO(item)"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="formthree.checkValue == 0"
            label="驳回原因"
            prop="rejectReason"
          >
            <el-input
              v-model="formthree.rejectReason"
              placeholder="请输入驳回原因"
            />
          </el-form-item>
        </el-form>
        <el-button
          class="baocun"
          size="medium"
          type="primary"
          @click="saveTW('formthree')"
        >
          保存
        </el-button>
      </el-tab-pane>
      <el-tab-pane label="演员认证信息" name="second">
        <el-form ref="form" label-width="200px" :model="form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <span>{{ form.name }}</span>
              </el-form-item>
              <el-form-item label="联系电话" prop="phone">
                <span>{{ form.phone }}</span>
              </el-form-item>
              <el-form-item label="演员头像" prop="actorPicture">
                <el-upload
                  v-model="form.actorPicture"
                  action="https://star.gengduoke.com/adminapi/file/upload"
                  :before-upload="beforeAvatarUpload"
                  class="avatar-uploader"
                  disabled
                  :headers="{
                    'X-Token': token,
                  }"
                  :on-success="handleAvatarSuccess"
                  :show-file-list="false"
                >
                  <img
                    v-if="imageUrl"
                    class="avatar"
                    disabled
                    :src="imageUrl"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <!-- <el-image
                  :preview-src-list="imageUrl"
                  :src="imageUrl"
                  style="width: 100px; height: 100px"
                /> -->
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <span v-if="form.sex == 0">女</span>
                <span v-if="form.sex == 1">男</span>
              </el-form-item>
              <el-form-item label="身高(cm)" prop="height">
                <span>{{ form.height }}</span>
              </el-form-item>
              <el-form-item label="体重(kg)" prop="weight">
                <span>{{ form.weight }}</span>
              </el-form-item>
              <el-form-item label="出生年月" prop="birthday">
                <span>{{ form.birthday }}</span>
              </el-form-item>

              <el-form-item label="毕业院校" prop="school">
                <span>{{ form.school }}</span>
              </el-form-item>
              <el-form-item label="民族" prop="minzu">
                <span>{{ form.minzu }}</span>
              </el-form-item>
              <el-form-item label="籍贯" prop="jiguan">
                <span>{{ form.jiguan }}</span>
              </el-form-item>
              <el-form-item label="特长" prop="speciality">
                <span>{{ form.speciality }}</span>
              </el-form-item>
              <el-form-item label="紧急联系人" prop="emergencyCont">
                <span>{{ form.emergencyCont }}</span>
              </el-form-item>
              <el-form-item label="紧急联系人手机" prop="emergencyContPhone">
                <span>{{ form.emergencyContPhone }}</span>
              </el-form-item>
              <el-form-item label="空闲时间" prop="freeTime">
                <span>{{ form.freeTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="查询经济公司/领队" prop="enterprise">
                {{ shujv }}
              </el-form-item>

              <el-form-item label="常住城市" prop="stayCity">
                {{ form.stayCity }}
              </el-form-item>
              <el-form-item label="所属角色" prop="roleId">
                <el-select
                  v-model="form.roleId"
                  disabled
                  placeholder="请选择所属角色"
                >
                  <el-option
                    v-for="item in options2"
                    :key="item.id"
                    disabled
                    :label="item.classifyName"
                    :value="item.id"
                    @click.native="chooseone(item)"
                  >
                    {{ item.classifyName }}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="摩卡照片" prop="moka">
                <!-- <img
                  v-if="imageUrltwo"
                  class="avatar"
                  disabled
                  :src="imageUrltwo"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <!-- <div v-for="(item, index) in form.mokaArray" :key="index">
                  <el-image
                    :preview-src-list="form.mokaArray"
                    :src="item"
                    style="width: 100px; height: 100px"
                  />
                </div> -->
                <el-col
                  v-for="(item, index) in form.mokaArray"
                  :key="index"
                  :lg="8"
                  :md="8"
                  :sm="8"
                  :xl="6"
                  :xs="24"
                >
                  <el-card
                    :body-style="{ padding: '0px', position: 'static' }"
                    shadow="hover"
                  >
                    <div class="demo-image__preview">
                      <el-image
                        :preview-src-list="form.mokaArray"
                        :src="item"
                        style="width: 100px; height: 100px"
                      />
                    </div>
                    <!-- <div class="card-title">{{ item.createTime }}</div>
                      <div class="card-description">{{ item.description }}</div> -->
                    <!-- <div class="card-datetime">{{ item.createTime }}</div> -->
                  </el-card>
                </el-col>
              </el-form-item>
              <el-form-item label="微信号" prop="wxNumber">
                {{ form.wxNumber }}
              </el-form-item>
              <el-form-item label="教育情况" prop="degreeEdu">
                {{ form.degreeEdu }}
              </el-form-item>
              <el-form-item label="有无慢性疾病或严重疾病" prop="health">
                <span v-if="form.health == 0">无</span>
                <span v-if="form.health == 1">有</span>
              </el-form-item>
              <el-form-item
                v-if="form.health == 1"
                label="健康详情"
                prop="healthInfo"
              >
                <!-- <el-input
                  v-model="form.healthInfo"
                  disabled
                  placeholder="请输入健康详情"
                /> -->
                {{ form.healthInfo }}
              </el-form-item>
              <el-form-item label="电子邮箱" prop="email">
                <!-- <el-input
                  v-model="form.email"
                  disabled
                  placeholder="请输入电子邮箱"
                /> -->
                {{ form.email }}
              </el-form-item>

              <el-form-item label="工作类型 " prop="workType">
                <span v-if="form.workType == 0">兼职</span>
                <span v-if="form.workType == 1">全职</span>
              </el-form-item>
              <el-form-item label="其他" prop="other">
                <!-- <el-input
                  v-model="form.other"
                  disabled
                  placeholder="请输入其他"
                /> -->
                {{ form.other }}
              </el-form-item>
              <el-form-item label="参演作品" prop="inWork">
                {{ form.inWork }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form
          ref="formtwo"
          label-width="200px"
          :model="formtwo"
          :rules="rules"
          style="text-align: center"
        >
          <el-form-item
            v-if="form.authActor == 0"
            label="当前审核状态"
            style="display: inline-block"
          >
            <span>未认证</span>
          </el-form-item>
          <el-form-item
            v-if="form.authActor == 1"
            label="当前审核状态"
            style="display: inline-block"
          >
            <span>待审核</span>
          </el-form-item>
          <el-form-item
            v-if="form.authActor == 2"
            label="当前审核状态"
            style="display: inline-block"
          >
            <span>审核通过</span>
          </el-form-item>
          <el-form-item
            v-if="form.authActor == 3"
            label="当前审核状态"
            style="display: inline-block"
          >
            <span>审核未通过</span>
          </el-form-item>
          <el-form-item
            label="审核状态"
            prop="checkValue"
            style="display: inline-block"
          >
            <el-select
              v-model="formtwo.checkValue"
              placeholder="请选择审核状态"
            >
              <el-option
                v-for="item in options5"
                :key="item.id"
                clearable
                :label="item.creClasName"
                :value="item.id"
                @click.native="optosall(item)"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="formtwo.checkValue == 0"
            label="驳回原因"
            prop="rejectReason"
          >
            <el-input
              v-model="formtwo.rejectReason"
              placeholder="请输入驳回原因"
            />
          </el-form-item>
        </el-form>
        <el-button
          class="baocun"
          size="medium"
          type="primary"
          @click="save('formtwo')"
        >
          保存
        </el-button>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>

  <!-- 增加 -->
</template>

<script>
  /* eslint-disable*/
  import { doAdd, serach, roleId, check, geturl, checktwo } from '@/api/yanyuan'
  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode,
  } from 'element-china-area-data'
  //import { number } from 'echarts'
  export default {
    name: 'search',

    data() {
      // 手机号码验证
      var contactPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'))
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入正确的手机号'))
          }
        }
      }
      const validatesurfacePlot = (rule, value, callback) => {
        if (this.form.actorPicture === '') {
          callback(new Error('请添加头像图片!!!!'))
        } else {
          callback()
        }
      }
      const validatesurfacePlotwo = (rule, value, callback) => {
        if (this.form.moka === '') {
          callback(new Error('请添加摩卡图片!!!!'))
        } else {
          callback()
        }
      }
      return {
        idCardFront: '', //正面
        idCardReverse: '', //范面
        activeName: 'first', //默认展示第一项
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              },
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              },
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              },
            },
          ],
        },
        options: regionDataPlus,
        selectedOptions: [],
        keyWord: '', //关键词
        token: '',
        imageUrl: '',
        imageUrltwo: [], //摩卡
        imglist: [], //摩卡数组
        getlist: '',
        value: true,
        value1: true,
        dialogVisible: false,
        disabled: false,
        options1: [],
        options2: [],
        options3: [],
        shfenone: '', //身份证整
        shfentwo: '', //身份证反面
        options5: [
          {
            id: 1,
            creClasName: '审核通过',
          },
          {
            id: 0,
            creClasName: '审核未通过',
          },
        ],
        options6: [
          {
            id: 1,
            creClasName: '审核通过',
          },
          {
            id: 0,
            creClasName: '审核未通过',
          },
        ],
        valueone: '', //查询
        valuetwo: '',
        shujv: '暂无数据',
        form: {},
        formtwo: {
          // 选择审核
          starUserId: 2, //移动端用户id
          beCheckedId: 1, //被审核的数据的主键id
          checkValue: '', //审核的结果
          rejectReason: '', //拒绝原因
        },
        formthree: {
          starUserId: 683, //移动端用户id
          checkValue: '', //审核的结果
          rejectReason: '', //拒绝原因
        },
        activated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.play()
        },
        deactivated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.pause()
        },

        rules: {
          rejectReason: [
            { required: true, trigger: 'blur', message: '请输入驳回原因' },
          ],
          checkValue: [
            { required: true, trigger: 'change', message: '请选择审核状态' },
          ],
        },
        rulesTWO: {
          rejectReason: [
            { required: true, trigger: 'blur', message: '请输入驳回原因' },
          ],
          checkValue: [
            { required: true, trigger: 'change', message: '请选择审核状态' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.token = this.$store.getters['user/token']
      this.fetchDatatwo()
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      },
      enterprise(e) {
        this.form.enterprise = e.id

        this.getlist = e.leaNickName
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return true
      },
      beforeAvatarUploadtwo(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return true
      },
      choose(e) {
        this.form.crewTheme = e.themeName
        this.form.crewThemeId = e.id
      }, //选择区域
      chooseone(e) {
        this.form.areaName = e.areaName
        this.form.areaId = e.id
      },
      handleChange(a) {
        this.form.particulars = a
      },
      handleAvatarSuccess(res, file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw)

        this.form.actorPicture = res.data
      },
      handleAvatarSuccesstwo(res, file, fileList) {
        this.imageUrltwo = URL.createObjectURL(file.raw)
        this.form.moka = res.data
      },
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '认证信息审核'
          this.form = row
          this.formtwo.starUserId = row.userId
          this.formtwo.beCheckedId = row.id
          this.formthree.starUserId = row.userId
          // this.formthree.beCheckedId = row.id
          this.imageUrl = row.actorPicture
          this.imglist = row.moka
          this.form.sex = String(row.sex)
          this.form.health = String(row.health)
          this.form.workType = String(row.workType)
          this.idCardReverse = row.idCardReverse
          this.idCardFront = row.idCardFront
          this.getlist = row.enterpriseName
          this.geturltwo()
          this.geturlone()
        }
        this.dialogFormVisible = true
      },
      close() {
        let userId = this.form.userId
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        if (!this.form.id) {
          this.form.userId = userId
        }
        this.dialogFormVisible = false
        this.imageUrl = ''
        this.imageUrltwo = ''
      },
      closetwo() {
        this.formtwo.checkValue = ''
        this.formtwo.rejectReason = ''
        this.dialogFormVisible = false
      },
      sethealth(e) {
        this.form.health = e
      },
      sethealthtwo(e) {
        this.form.workType = e
      },
      save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const msg = check(this.formtwo)
            msg.then((res) => {
              this.$baseMessage(res.msg, 'success', 'vab-hey-message-success')
              this.$emit('fetch-data')
              this.closetwo()
            })
          } else {
            return false
          }
        })
      },
      saveTW(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const msg = checktwo(this.formthree)
            msg.then((res) => {
              this.$baseMessage(res.msg, 'success', 'vab-hey-message-success')
              this.$emit('fetch-data')
              this.closetwo()
            })
          } else {
            return false
          }
        })
      },
      nickNameChange() {
        this.$forceUpdate()
      },
      queryDatass() {
        this.queryData()
      },
      optosall(e) {
        this.formtwo.checkValue = e.id
      },
      optosallTWO(e) {
        this.formthree.checkValue = e.id
      },
      queryData() {
        //chaxun
        this.disabled = true
        let keyWord = this.keyWord
        const msg = serach({
          keyWord: keyWord,
        })
        msg.then((res) => {
          if (res.msg == 'success') {
            this.options1 = res.data
          }
        })
      },
      async fetchDatatwo() {
        let queryForm = {}
        const res = await roleId(queryForm)
        this.options2 = res.data
      },
      async geturlone() {
        const res = await geturl({
          f: this.idCardFront,
        })
        this.shfenone = res
      },
      async geturltwo() {
        const res = await geturl({
          f: this.idCardReverse,
        })
        this.shfentwo = res
      },
    },
  }
</script>
<style>
  /* .huakuai {
    position: relative;
    left: 96%;
  } */
  .avatar-uploader .el-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    width: 178px;
    height: 178px;
    font-size: 28px;
    line-height: 178px;
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
    width: 178px;
    height: 178px;
  }
  .baocun {
    width: 100%;
    height: 100%;
  }
</style>
